<!--
* description: 手动配车
* author:wangjuan
* createdDate:
-->
<template>
  <section class="editManualSCar">
    <el-dialog
      v-dialogDrag
      :visible="popupsVisible"
      :append-to-body="true"
      width="70%"
      :close-on-click-modal="false"
      @close="close"
    >
      <dialogHeader slot="title" :title="topName" :style-type="$store.state.app.dialogType" />
      <one-table-template
        ref="multipleTable"
        :dynamic-buttons="tableButtons"
        :dynamic-api-config="apiConfig"
        :dynamic-components="tableComponents"
        :dynamic-table-cols="tableCols"
        :dynamic-form-fields="formField"
        :dynamic-is-show-more-btn="false"
        :dynamic-is-init-table="true"
        :dynamic-is-show-select="true"
        :dynamic-table-defult-height="350"
        :callback-obj="callbackObj"
      />

      <div slot="footer" class="dialog-footer">
        <el-button
          v-for="comp in dynamicButtons"
          :key="comp.compKey"
          :type="comp.type"
          :icon="comp.icon"
          :fixed="true"
          @click="comp.clickEvent"
        >{{ comp.text }}</el-button>
      </div>
    </el-dialog>
  </section>
</template>
<script>
import { oneTableWithViewTemplateMixins } from '@/components/mixins/oneTableWithViewTemplateMixins'
import OneTableTemplate from '@/components/templates/oneTable'
import api from '@/api/belowInfo'
import Vue from 'vue'

export default {
  components: {
    OneTableTemplate,
    dialogHeader: () => import('@/components/dialogHeader') // 弹窗标题,
  },

  mixins: [oneTableWithViewTemplateMixins],

  props: {
    popupsVisible: { type: Boolean, default: false },
    manualRowData: { type: Object, default: () => {} }
  },

  beforeRouteEnter(to, from, next) {
    Vue.prototype.$ConfigCache.CacheConfig.initData(
      // 同时加载当前页面和编辑框页面的配置
      [to.path, ''],
      function() {
        next()
      })
  },

  data() {
    const viewPageCode = this.$route.path
    // 绑定事件配置化事件
    this.$ConfigCache.CacheConfig.bindEvent(this, [viewPageCode])

    return {
      topName: '手动配车',
      table: null,
      curSelected: null,
      selectData: {},
      clickRowsData: {},
      apiConfig: api.queryCarInfo,
      selectList: '',
      // 动态组件-按钮
      dynamicButtons: [
        {
          compKey: 'btnKey1',
          type: 'primary',
          size: 'small',
          icon: 'iconfont icon-confirm',
          clickEvent: () => this.confirm(),
          text: this.$t('sys.button.confirm') /* 确认*/
        },
        {
          compKey: 'btnKey2',
          size: 'small',
          icon: 'iconfont icon-cancel',
          clickEvent: () => this.close(),
          text: this.$t('sys.button.cancel') // 取消
        }
      ],

      tableButtons: this.$ConfigCache.CacheConfig.cacheData[viewPageCode] &&
      this.$ConfigCache.CacheConfig.cacheData[viewPageCode].tableButtons &&
      this.$ConfigCache.CacheConfig.cacheData[viewPageCode].tableButtons.length > 0
        ? this.$ConfigCache.CacheConfig.cacheData[viewPageCode].tableButtons
        : [
          {
            compKey: 'btnKey3',
            type: 'primary',
            size: 'small',
            name: 'search',
            clickEvent: () => this.queryTable(1),
            text: this.$t('sys.button.query'), // 查询
            position: 'right',
            fuzzySearch: true
          },
          {
            compKey: 'btnKey4',
            size: 'small',
            name: 'reset',
            clickEvent: () => this.reset(),
            text: this.$t('sys.button.reset'),
            position: 'right' // 重置
          }
        ],

      tableComponents:
        this.$ConfigCache.CacheConfig.cacheData[viewPageCode] &&
        this.$ConfigCache.CacheConfig.cacheData[viewPageCode].tableComponents.length > 0
          ? this.$ConfigCache.CacheConfig.cacheData[viewPageCode].tableComponents
          : [
            {
              compKey: 'compKey1',
              labelName: 'VIN码：',
              codeField: 'vin',
              component: () => import('@/components/org/commonInput'),
              type: 'inputText',
              isMust: true
            },
            {
              compKey: 'compKey7',
              labelName: '销售计划号：',
              codeField: 'salePlanCode',
              component: () => import('@/components/org/commonInput'),
              type: 'inputText',
              isMust: true
            },
            {
              compKey: 'compKey2',
              labelName: '车系：',
              codeField: 'carSeriesCn',
              component: () => import('@/components/org/commonInput'),
              type: 'inputText',
              disabled: true,
              isMust: true
            },
            {
              compKey: 'compKey3',
              labelName: '基础车型：',
              codeField: 'carConfigCn',
              component: () => import('@/components/org/commonInput'),
              type: 'inputText',
              disabled: true,
              isMust: true
            },
            {
              compKey: 'compKey4',
              labelName: '选装包：',
              codeField: 'optionalPagName',
              component: () => import('@/components/org/commonInput'),
              type: 'inputText',
              disabled: true,
              isMust: true
            },
            {
              compKey: 'compKey5',
              labelName: '车身颜色：',
              codeField: 'carColorName',
              component: () => import('@/components/org/commonInput'),
              type: 'inputText',
              disabled: true,
              isMust: true
            },
            {
              compKey: 'compKey6',
              labelName: '内饰颜色：',
              codeField: 'carIncolorName',
              component: () => import('@/components/org/commonInput'),
              type: 'inputText',
              disabled: true,
              isMust: true
            }
          ],

      tableCols: this.$ConfigCache.CacheConfig.cacheData[viewPageCode] &&
      this.$ConfigCache.CacheConfig.cacheData[viewPageCode].tableCols.length > 0
        ? this.$ConfigCache.CacheConfig.cacheData[viewPageCode].tableCols
        : [
          {
            prop: 'releaseId',
            label: '主键ID',
            hidden: true,
            alwaysHidden: true
          },
          {
            prop: 'updateControlId',
            label: '并发控制ID',
            hidden: true,
            alwaysHidden: true
          },
          {
            prop: 'vin',
            label: 'VIN'
          },
          {
            prop: 'salePlanCode',
            label: '销售计划号'
          },
          {
            prop: 'carSeriesCn',
            label: '车系'
          },
          {
            prop: 'carConfigCn',
            label: '基础车型'
          },
          {
            prop: 'optionalPagName',
            label: '选装包'
          },
          {
            prop: 'carColorName',
            label: '车身颜色'
          },
          {
            prop: 'carIncolorName',
            label: '内饰颜色'
          }
        ],

      callbackObj: {
        // 当选择项发生变化时会触发该事件（多选时）
        onCheckSelectChange: (selection) => {
          // console.log(this.$refs.multipleTable.$parent.$parent)
          this.selectList = selection.map((item) => {
            return item
          })
          this.table === null ? this.foundTable() : ''
          this.handleOneSelect(selection)
        }
      },

      formField: this.$utils.getFormField(this, {
        saleOrderId: this.manualRowData.saleOrderId,
        carSeriesCn: this.manualRowData.carSeriesCn,
        carConfigCn: this.manualRowData.carConfigCn,
        optionalPagName: this.manualRowData.optionalPagName,
        carColorName: this.manualRowData.carColorName,
        carIncolorName: this.manualRowData.carIncolorName,
        carSeriesId: this.manualRowData.carSeriesId,
        carConfigId: this.manualRowData.carConfigId,
        carColorId: this.manualRowData.carColorId,
        carIncolorId: this.manualRowData.carIncolorId,
        optionalPagId: this.manualRowData.optionalPagId,
        salePlanCode: '',
        vin: ''
      }, this.$ConfigCache.CacheConfig.cacheData[viewPageCode])

    }
  },
  // created() {
  //   this.formField = this.manualRowdata
  // },
  methods: {
    // 查找el-table表格组件
    foundTable() {
      this.$refs.multipleTable.$children.forEach(el => {
        el.$el.className.includes('el-table') ? this.table = el : ''
      })
    },
    // 关闭弹窗
    close(type) {
      this.$emit('closemanualSCar', type)
    },
    // 确认checkZb checkAREA  checkHouse
    confirm() {
      this.$requestAPI({
        apiUrl: api.updateSupplyCar.APIUrl,
        variables: {
          SALE_ORDER_D_ID: this.manualRowData.SALE_ORDER_D_ID,
          DELIVERY_DLR_ID: this.manualRowData.DELIVERY_DLR_ID,
          saleOrderId: this.manualRowData.saleOrderId,
          updateControlId: this.manualRowData.updateControlId,
          updateControlIdD: this.manualRowData.updateControlIdD,
          carHouseCodeS: this.selectList[0].carHouseCodeS,
          firstInHoststockDate: this.selectList[0].firstInHoststockDate,
          checkZb: this.selectList[0].checkZb,
          checkAREA: this.selectList[0].checkAREA,
          checkHouse: this.selectList[0].checkHouse,
          InstoreTime: this.selectList[0].InstoreTime,
          carId: this.selectList[0].carId,
          stockId: this.selectList[0].stockId,
          salePlanCode: this.selectList[0].salePlanCode,
          saleOrderCode: this.selectList[0].saleOrderCode,
          vin: this.selectList[0].vin
        }
      }).then(res => {
        this.$message(res.msg)
        this.close()
      }).catch(err => {
        console.log(err)
      })
    },
    // 设置表格单选
    handleOneSelect(selection) {
      if (selection.length === 0) { this.selectData = {}; return }
      const lastIndex = selection.length - 1
      this.selectData = selection[lastIndex]
      selection.forEach((sel, idx) => {
        lastIndex !== idx ? this.table.toggleRowSelection(sel, false) : this.curSelected = sel
      })
    }
  }
}
</script>
